<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex仿知乎首页</title>
    <%--知乎css--%>
    <link rel="stylesheet" type="text/css" href="../css/zhihu.css"/>
    <%--富文本框组件--%>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #ffffff;
            min-width: 120px;
            margin-top: 20px;
        }

        .dropdown-content a {
            display: block;
            padding-left: 10px;
            line-height: 30px;
        }

        #editor {
            height: 50%;
            background-color: white;
            width: 100%;
        }

        .ql-toolbar.ql-snow {
            width: 100%;
            background-color: white;
        }
    </style>
<body>
<div class="content">
    <div class="content-left">
        <ul class="content-left-header ul-head-left">
            <li class="li-head-left"><a href="javascript:void(0)" id="recommend" style="color: #0084FF">推荐</a></li>
            <li class="li-head-left"><a href="javascript:void(0)" id="follow">关注</a></li>
            <li class="li-head-left"><a href="javascript:void(0)">热榜</a></li>
            <li class="li-head-left"><a href="javascript:void(0)">视频</a></li>
        </ul>
        <hr>
        <div class="data-div">
            <div class="data" id="data">

            </div>
            <div class="more">
                <a href="#" onclick="more()">加载更多</a>
            </div>
        </div>

    </div>
    <div class="content-right">
        <div class="recommend_div">
        </div>
    </div>
</div>
<div class="reportPopup">
    <div style="width: 100%;text-align: right;" class="reportPopup-top">
        <img src="../imgs/index-imgs/close-img.png" style="width: 35px;cursor: pointer;" onclick="hideReportPopup()" alt="">
    </div>
    <div class="title" style="display: flex;align-items: center;justify-content: center;">
        <h3 style="font-size: 20px;">举报</h3>
    </div>
    <h2 style="font-size: 15px;margin-left: 30px;">请输入举报类型</h2>
    <div class="reportPopup-data">
        <%--<div class="reportPopup-data-div">摄政有害</div> <div class="reportPopup-data-div">摄政有害</div>
        <div class="reportPopup-data-div">摄政有害</div> <div class="reportPopup-data-div">摄政有害</div>
        <div class="reportPopup-data-div">摄政有害</div> <div class="reportPopup-data-div">摄政有害</div>
        <div class="reportPopup-data-div">摄政有害</div> <div class="reportPopup-data-div">摄政有害</div>--%>
    </div>
    <h2 style="margin-left: 2%;font-size: 15px;">请填写举报信息</h2>
    <div class="reportPopup-content">
        <textarea class="textarea-reportPopup" placeholder="请填写"></textarea>


    </div>
    <div class="report-data-div" style="display: flex;justify-content: center;align-items: center">
        <button class="report-div-btn">提交</button>
    </div>
</div>

<div id="window" class="window_css">
    <div style="width: 100%;text-align: right;">
        <img src="../imgs/index-imgs/close-img.png" style="width: 35px;cursor: pointer;" onclick="hideWindow()" alt="">
    </div>
    <div class="" style="height: 30px;">
        评论回复
    </div>
    <hr>
    <hr>
    <div class="window_css_dialogue" id="commentData">

    </div>
    <div class="ed" style="height: 25%;width: 100%;background-color: white;">
        <div id="editor" class="editor">

        </div>
        <button class="editor-btn" style="float: right;">发送</button>
    </div>

</div>
</div>
<div id="shadow" class="shadow_css"></div>
</body>
<script>
    let toolbarOptions = [
        ['blockquote', 'code-block'],

        [{'color': []}, {'background': []}],
        [{'font': []}],

        ['link', 'image'],
        ['clean']
    ];

    let quill = new Quill('#editor', {
        modules: {
            toolbar: toolbarOptions
        },
        placeholder: "请输入内容",
        theme: 'snow',
    });

    <% Object username = session.getAttribute("username");%>
    //初始id
    let userId = 0;
    //查询条数
    let limit = 10;
    //推荐关注的状态
    let status = 1;
    let dataTable = {};

    let height = 0;
    let divHeight = 0;
    let divHeadId = 0;
    let divhtmlSize = 0;
    //喜欢的数量
    let likeCount = 0;
    //回复框拼接值
    let childrens = "";
    //评论富文本框贴子id
    let edCid = 0;
    //评论富文本框添加评论父类id
    let edParentId = 0;
    //评论数量
    let commentCount = 0;
    //评论喜欢数量
    let commentLikeCount = 0;
    //评论喜欢状态
    let commentLikeStatus = null;
    //举报弹框状态
    let reportStatus = 0;
    //举报类型id
    let reportAid = 0;
    //举报帖子id
    let reportCid = 0;
    //举报评论id
    let reportCommentCid = 0;
    //举报评论还是帖子状态
    let reportCardOrCommentstatus = 0;
    $(function () {
        selectUser();
        css();
        let ofollow = $("#follow");
        ofollow.on("click", function () {
            follow();
        })

        let orecommend = $("#recommend");
        orecommend.on("click", function () {
            recommend();
        })


        let ouserImg = $("#userImg");
        ouserImg.on("click", function () {
            // location.href="update.jsp";
            $("#myDropdown").css("display", "block");
        })


    })


    function follow() {
        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/card?ac=selectFollow",
            type: "post",
            data: {
                id: userId,
                limit: limit,
            },
            dataType: "json",
            success: function (data) {
                status = 2;
                questions(data);
            }
        })

    }

    function recommend() {
        /*console.log(limit)*/
        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/card?ac=selectRecommend",
            type: "post",
            data: {
                id: userId,
                limit: limit
            },
            dataType: "json",
            success: function (data) {
                status = 1;
                questions(data);
            }
        })
    }

    function css() {
        var oa = $('li').children('a');
        oa.on("click", function () {
            oa.css('color', 'black');
            $(this).css('color', '#098dee');
        });
    }

    $("html").on("click", function (event) {
        window.parent.$("#myDropdown").css("display", "none");
        window.parent.close()
        window.parent.$(".dropdown-news").css("display", "none");
        $("#report-div" + reportStatus).css("display", "none");
        reportStatus = 0;
        if (reportStatus == 0) {
            console.log("---"+reportStatus)
            $(".report-div").css("display", "none");
        }
    })

    function selectCard(data) {
        /* console.log(userId)*/
        let title = data;
        $("#recommend").css("color", '');
        $("#follow").css("color", '');
        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/card?ac=selectCard",
            type: "post",
            data: {
                id: userId,
                limit: limit,
                title: title
            },
            dataType: "json",
            success: function (data) {
                /*console.log(data)*/
                questions(data);
            }
        })
    }

    function questions(data) {
        /*  console.log(data)*/
        let questionData = data.data;
        let content = $("#data");
        //赞同 反对
        let endorseStatus = "";
        //收藏按钮
        let collectStatus = "";
        //点赞按钮
        let likeStatus = "";
        content.empty();
        /* console.log(questionData + "==")*/
        for (let i = 0; i < questionData.length; i++) {
            var question = questionData[i];
            endorseCount(question.id);
            selectCommentCount(question.id);
            tableLikeByCardId(question.id);
            /* console.log(dataTable)*/
            if (dataTable == null) {
                endorseStatus = `
                <button id="praise${question.id}" onclick="endorse(${question.id})" style="background-color: #e7f1fe;color: #1772f6;" class="like-button">▲ 赞同 ${likeCount}</button>
			    <button id="trample${question.id}" onclick="oppose(${question.id})" style="background-color: #e7f1fe;color: #1772f6;" class="oppose-button">▼</button>
                `;
                collectStatus = `
                 <label for="" class="button-label" id="collect${question.id}" onclick="collect(${question.id})">
                       <img src="../imgs/index-imgs/collect-img.png" class="operation-button-img" alt=""/>
                       <button class="information-button" >
                            收藏
                        </button>
                </label>
                 `;

                likeStatus = `
                  <label for="" class="button-label" id="love${question.id}" onclick="love(${question.id})">
                        <img src="../imgs/index-imgs/fond-img.png" class="operation-button-img" alt="喜欢"/>
                        <button class="information-button" >
                        喜欢
                        </button>
                    </label>
            `;
            } else {
                if (dataTable.endorseStatus === '0') {
                    endorseStatus = `
                <button id="praise${question.id}" onclick="endorse(${question.id})" style="background-color: #e7f1fe;color: #1772f6;" class="like-button">▲ 赞同 ${likeCount}</button>
			    <button id="trample${question.id}" onclick="oppose(${question.id})" style="background-color: #e7f1fe;color: #1772f6;" class="oppose-button">▼</button>
                 `;
                } else if (dataTable.endorseStatus === '1') {
                    endorseStatus = `
                    <button id="praise${question.id}" onclick="endorse(${question.id})" style="background-color: #1772f6;color: #e7f1fe;" class="like-button">▲ 已赞同 ${likeCount}</button>
			        <button id="trample${question.id}" onclick="oppose(${question.id})" style="background-color: #e7f1fe;color: #1772f6;" class="oppose-button">▼</button>
                `;
                } else {
                    endorseStatus = `
                    <button id="praise${question.id}" onclick="endorse(${question.id})" style="background-color: #e7f1fe;color: #1772f6;" class="like-button">▲ 赞同 ${likeCount}</button>
			        <button id="trample${question.id}" onclick="oppose(${question.id})" style="background-color: #1772f6;color: #e7f1fe;" class="oppose-button">▼</button>
                    `;
                }

                if (dataTable.collectStatus === '1') {
                    collectStatus = `
                    <label for="" class="button-label" id="collect${question.id}" onclick="collect(${question.id})">
                        <img src="../imgs/index-imgs/collect02-img.png" class="operation-button-img" alt=""/>
                        <button class="information-button" >
                        取消收藏
                        </button>
                    </label>
                `;
                } else {
                    collectStatus = `

                    <label for="" class="button-label" id="collect${question.id}" onclick="collect(${question.id})">
                       <img src="../imgs/index-imgs/collect-img.png" class="operation-button-img" alt=""/>
                       <button class="information-button" >
                            收藏
                        </button>
                    </label>
                `;
                }

                if (dataTable.likeStatus === '1') {
                    likeStatus = `
                    <label for="" class="button-label" id="love${question.id}" onclick="love(${question.id})">
                        <img src="../imgs/index-imgs/fond02-img.png" class="operation-button-img" alt="取消喜欢"/>
                        <button class="information-button" >
                        取消喜欢
                        </button>
                    </label>
                `;
                } else {
                    likeStatus = `
                    <label for="" class="button-label" id="love${question.id}" onclick="love(${question.id})">
                        <img src="../imgs/index-imgs/fond-img.png" class="operation-button-img" alt="喜欢"/>
                        <button class="information-button">
                        喜欢
                        </button>
                    </label>
                `;
                }
            }
            var questionCard = `
                        <div class="question" id="question${question.id}">
                            <p class="user-head" id="head${question.id}"><img src="${question.img}"  style="width: 30px;">${question.user_name}</p>
                            <h3><a href="#">${question.title}</a></h3>
                            <div class="wrapper" id="wrapper${question.id}">
                                <div class="text" id="text${question.id}">
                                   ${question.card_content}
                                </div>

                            </div>
                            <div class="operation" id="operation${question.id}" >
                               ` + endorseStatus + `

                               <label for="" class="button-label" id="commentId${question.id}"  onclick="selectComment(${question.id})">
                                       <img src="../imgs/index-imgs/comment-img.png" class="operation-button-img" alt=""/>
                                       <button class="information-button" >
                                        ${commentCount}条评论
                                        </button>
                                </label>
                                ` + collectStatus + likeStatus + `
                                <label for="" class="button-label" id="report${question.id}" onclick="report(${question.id},1)">
                                <img src="../imgs/index-imgs/share-img.png"  style="width: 20px;cursor: pointer;" alt=""/>
                                <button class="information-button">
                                    举报
                                </button>
                                </label>

                                <div class="report-div" id="report-div${question.id}" >
                                <a class="a-bgColor"  style="margin-top: 5px;" id="personal-center" >
                                  <span style="color: #8a8a8a;" class="zhuye-span" onclick="aReport(${question.id},1)">举报帖子</span>
                                </a>
                                <a class="a-bgColor"  style="margin-top: 5px;" id="personal-center" >
                                  <span style="color: #8a8a8a;" class="zhuye-span" onclick="aUninterested(${question.id})">不感兴趣</span>
                                </a>
                                </div>
                                <label class="btn" id="label${question.id}" for="exp${question.id}" onclick="unfoldUser(this,${question.id})">展开</label>
                            </div>
                            <hr>
                        </div>
                    `;
            content.append(questionCard);
        }
    }


    function selectUser() {
        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/user?ac=selectUser",
            type: "post",
            data: {
                username: "<%=username %>"
            },
            dataType: "json",
            success: function (data) {
                userId = data.data[0].id;
                let userImg = $("#userImg");
                userImg.attr("src", data.data[0].img);
                recommend();
                recommended();
            }
        })

    }


    /*function selectComment(id){
        location.href="comment.jsp?id="+id;
    }*/


    function unfoldUser(e, headId) {
        divHeadId = headId;
        if ($("#text" + headId).css("display") == '-webkit-box') {
            $("#label" + headId).html('收起');
            $("#head" + headId).css("display", "block");
            $("#text" + headId).css("display", 'block');
            zhankai(headId);

        } else if ($("#text" + headId).css("display") == 'block') {
            $("#label" + headId).html('展开');
            $("#head" + headId).css("display", "none");
            $("#text" + headId).css("display", '-webkit-box')
            zhankai(headId)
            $("#operation" + headId).css({
                "position": "",
                "bottom": "",
                "z-index": ""
            })
        }
    }

    $('.data-div').on('scroll', function () { //监听滚动事件
        var scrollTop = $(this).scrollTop(); //获取滚动条上边界与顶部之间的距离（向下滚动）
        /*scrollTop = scrollTop;*/
        height = scrollTop + divHeight;
        /*console.log("滚动条：", height)*/
        // console.log("nav居上距离：",divHeight)
        if ($("#question" + divHeadId).height() > divhtmlSize) {
            $("#operation" + divHeadId).css("position", "fixed")
            $("#operation" + divHeadId).css("bottom", "15px")

            $("#operation" + divHeadId).css("z-index", "999")
        }
        if (height > $("#question" + divHeadId).height()) {
            $("#operation" + divHeadId).css({
                "position": "",
                "bottom": "",
                "width": "",
                "z-index": "",
            })
        }


    });


    function zhankai(headId) {
        if (headId > 0) {
            divHeadId = headId;
            var navtop = $("#question" + headId).offset().top;
            divHeight = navtop;
            let htmlSize = jQuery("html").outerHeight(true);
            divhtmlSize = htmlSize;

        }

        /*console.log($("#question" + headId).height())*/
        // var distanceTop = $("#question"+headId).offsetTop; // 获取子元素顶部距离父元素顶部的距离
        if (height > $("#question" + headId).height()) {

        }


    }


    function selectComment(id) {
        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/card?ac=selectComment",
            type: "post",
            data: {
                id: id,
            },
            dataType: "json",
            success: function (data) {
                edCid = id;
                /*console.log(data.data)*/
                ssss(data);
            }
        })
        displayWindow();
    }

    //查询评论喜欢数量 同步
    function selectyDiscussCount(cardId, commentId) {
        $.ajax({
            async: false,
            url: "http://localhost:8080/zhihu1/comment?ac=queryDiscussCount",
            type: "post",
            data: {
                cardId: cardId,
                commentId: commentId
            },
            dataType: "json",
            success: function (data) {
                commentLikeCount = data.data;
            }
        })
    }

    //查询是否点亮喜欢
    function getdiscuss(userId, commentId) {
        $.ajax({
            async: false,
            url: "http://localhost:8080/zhihu1/comment?ac=queryDiscuss",
            type: "post",
            data: {
                userId: userId,
                commentId: commentId
            },
            dataType: "json",
            success: function (data) {
                commentLikeStatus = data.data;
            }
        })
    }

    //点亮评论喜欢 取消 和 取消后点亮
    function commentLikeBtn(commentId) {
        window.parent.prohibition();
        getdiscuss(userId, commentId);
        let tombstone = "";
        if (commentLikeStatus == null) {
            $.ajax({
                async: false,
                url: "http://localhost:8080/zhihu1/comment?ac=addDiscuss",
                type: "post",
                data: {
                    userId: userId,
                    commentId: commentId
                },
                dataType: "json",
                success: function (data) {
                    $("#commentLike" + commentId + " img").attr("src", "../imgs/index-imgs/fond02-img.png");
                    selectyDiscussCount(edCid, commentId);
                    $("#commentLike" + commentId + " button").html(commentLikeCount)
                    selectComment(edCid)

                }
            })
            return;
        } else if (commentLikeStatus.tombstone == "0") {
            tombstone = "1";
        } else if (commentLikeStatus.tombstone == "1") {
            tombstone = "0";
        }
        $.ajax({
            async: false,
            url: "http://localhost:8080/zhihu1/comment?ac=modifyTombstone",
            type: "post",
            data: {
                commentId: commentId,
                tombstone: tombstone
            },
            dataType: "json",
            success: function (data) {
                if (commentLikeStatus.tombstone == "1") {
                    $("#commentLike" + commentId + " img").attr("src", "../imgs/index-imgs/fond02-img.png");
                    selectyDiscussCount(edCid, commentId);
                    $("#commentLike" + commentId + " button").html(commentLikeCount)
                } else if (commentLikeStatus.tombstone == "0") {
                    $("#commentLike" + commentId + " img").attr("src", "../imgs/index-imgs/fond-img.png");
                    selectyDiscussCount(edCid, commentId);
                    $("#commentLike" + commentId + " button").html(commentLikeCount)
                }
            }
        })
    }

    //迭代生成评论子类
    function commentSum(item, name) {
        if (item.length > 0) {
            for (let i = 0; i < item.length; i++) {
                selectyDiscussCount(edCid, item[i].id);
                getdiscuss(userId, item[i].id);
                let commentLike = "";
                if (commentLikeStatus == null) {
                    commentLike = `
                    <label for="" class="button-label" id="commentLike${item[i].id}" onclick="commentLikeBtn(${item[i].id})">
                           <img src="../imgs/index-imgs/fond-img.png" class="operation-button-img" alt="喜欢"/>
                                <button class="information-button" >
                                 ${commentLikeCount}
                                 </button>
                                 </label>
                `;
                } else if (commentLikeStatus.tombstone == 1) {
                    commentLike = `
                    <label for="" class="button-label" id="commentLike${item[i].id}" onclick="commentLikeBtn(${item[i].id})">
                           <img src="../imgs/index-imgs/fond-img.png" class="operation-button-img" alt="喜欢"/>
                                <button class="information-button" >
                                 ${commentLikeCount}
                                 </button>
                                 </label>
                `;
                } else if (commentLikeStatus.tombstone == 0) {
                    commentLike = `
                    <label for="" class="button-label" id="commentLike${item[i].id}" onclick="commentLikeBtn(${item[i].id})">
                           <img src="../imgs/index-imgs/fond02-img.png" class="operation-button-img" alt="喜欢"/>
                                <button class="information-button" >
                                 ${commentLikeCount}
                                 </button>
                                 </label>
                `;
                }
                childrens += `<div class="comData" style="margin-left: 100px;margin-top: 10px;" id="${item[i].id}">
                                    <img src="${item[i].img}"  style="width: 30px;"><a class="window-a"  href="#">
                                    ${item[i].user_name} > ${name}
                                    </a>
                                    <div class="com-title" style="margin-left: 30px;margin-top: 10px;word-break: break-all;">
                                    ${item[i].comment_content}<br>
                                     </div>
                                    <div style="display: flex; align-items: center;font-size: 15px;height: 36px;margin-left: 40px;margin-top: 10px;color: #949494;">
                                     ${item[i].create_time} · IP属地：${item[i].address}
                                     <label style="margin-left: 35px;" for="" class="button-label" onclick="at(${item[i].id},'${item[i].user_name}',${item[i].parent_id})">
                                               <img style="margin-left: 32%;" src="../imgs/index-imgs/comment-img.png" class="operation-button-img" alt=""/>
                                               <button class="information-button" style="width: 100px;">
                                                回复
                                                </button>
                                        </label>
                                        ` + commentLike + `
                                        <label for="" class="button-label" id="report${item[i].id}" onclick="report(${item[i].id},2)">
                                <img src="../imgs/index-imgs/share-img.png"  style="width: 20px;height: 23px;height: 23px;cursor: pointer;" alt=""/>
                                <button class="information-button">
                                    举报
                                </button>
                                </label>

                                <div class="report-div" id="report-div${item[i].id}" >
                                <a class="a-bgColor"  style="margin-top: 5px;" id="personal-center" >
                                  <span style="color: #8a8a8a;" class="zhuye-span" onclick="aReport(${item[i].id},2)">举报评论</span>
                                </a>
                                <a class="a-bgColor"  style="margin-top: 5px;" id="personal-center" >
                                  <span style="color: #8a8a8a;" class="zhuye-span" onclick="aUninterested(${item[i].id})">不感兴趣</span>
                                </a>
                                </div>
                                     </div>
                                </div>

                                <hr>
                                `;
                commentSum(item[i].childrenList, item[i].user_name);
            }
        }
        22
    }

    function ssss(data) {
        let commentData = data.data;
        let content = $("#commentData");
        content.empty();
        if (commentData.length == 0) {
            let div = $("<div>");
            let a = $("<a>");
            a.text("暂无评论")
            div.append(a);
            content.append(div);
        } else {
            for (let i = 0; i < commentData.length; i++) {
                let com = commentData[i];
                let childrenList = com.childrenList;
                commentSum(childrenList, com.user_name);
                selectyDiscussCount(edCid, com.id);
                getdiscuss(userId, com.id);
                console.log(commentLikeStatus);
                let commentLike = "";
                if (commentLikeStatus == null) {
                    commentLike = `
                    <label for="" class="button-label" id="commentLike${com.id}" onclick="commentLikeBtn(${com.id})">
                           <img src="../imgs/index-imgs/fond-img.png" class="operation-button-img" alt="喜欢"/>
                                <button class="information-button">
                                 ${commentLikeCount}
                                 </button>
                                 </label>
                `;
                } else if (commentLikeStatus.tombstone == 1) {
                    commentLike = `
                    <label for="" class="button-label" id="commentLike${com.id}" onclick="commentLikeBtn(${com.id})">
                           <img src="../imgs/index-imgs/fond-img.png" class="operation-button-img" alt="喜欢"/>
                                <button class="information-button" >
                                 ${commentLikeCount}
                                 </button>
                                 </label>
                `;
                } else if (commentLikeStatus.tombstone == 0) {
                    console.log(commentLikeStatus.tombstone == 0 + "父")
                    commentLike = `
                    <label for="" class="button-label" id="commentLike${com.id}" onclick="commentLikeBtn(${com.id})">
                           <img src="../imgs/index-imgs/fond02-img.png" class="operation-button-img" alt="喜欢"/>
                                <button class="information-button" >
                                 ${commentLikeCount}
                                 </button>
                                 </label>
                `;
                }

                let questionCard = `
                        <hr>
                        <div class="comment-data" id="${com.id}">
                            <div class="comData" style="margin-left: 30px;margin-top: 10px;" id="${com.id}">

                                <img src="${com.img}"  style="width: 30px;">
                                <a href="#" class="window-a">${com.user_name}</a>
                                <div class="com-title" style="margin-left: 40px;margin-top: 10px;word-break: break-all;">
                                    ${com.comment_content}<br>
                                 </div>
                                 <div style="display: flex; align-items: center;font-size: 15px;height: 36px;margin-left: 40px;margin-top: 10px;color: #949494;">
                                 ${com.create_time} · IP属地：${com.address}
                                 <label  style="margin-left: 35px;" for="" class="button-label" onclick="at(${com.id},'${com.user_name}',${com.parent_id})">
                                           <img style="margin-left: 32%;" src="../imgs/index-imgs/comment-img.png" class="operation-button-img" alt=""/>
                                           <button class="information-button" style="width: 100px;">
                                            回复
                                            </button>
                                    </label>
                                   ` + commentLike + `
                                <label for="" class="button-label" id="report${com.id}" onclick="report(${com.id},2)">
                                <img src="../imgs/index-imgs/share-img.png"  style="height: 23px;width: 20px;cursor: pointer;" alt=""/>
                                <button class="information-button">
                                    举报
                                </button>
                                </label>

                                <div class="report-div" id="report-div${com.id}" >
                                <a class="a-bgColor"  style="margin-top: 5px;" id="personal-center" >
                                  <span style="color: #8a8a8a;" class="zhuye-span" onclick="aReport(${com.id})">举报评论</span>
                                </a>
                                <a class="a-bgColor"  style="margin-top: 5px;" id="personal-center" >
                                  <span style="color: #8a8a8a;" class="zhuye-span" onclick="aUninterested(${com.id})">不感兴趣</span>
                                </a>
                                </div>
                                 </div>

                                </div>
                            <hr>
                        ` + childrens + `
                        </div>

                        <hr>
                    `;


                content.append(questionCard);
                childrens = "";
            }
        }

    }

    function at(id, name, parentId) {
        edParentId = id;
        let edTitle = $(".ql-editor");
        edTitle.attr("data-placeholder", "@" + name)
    }


    $(".editor-btn").on("click", function () {
        window.parent.prohibition();
        let edTitle = $(".ql-editor");
        /*console.log(edTitle.html())*/
        $.ajax({
            async: false,
            url: "http://localhost:8080/zhihu1/card?ac=insertComment",
            type: "post",
            data: {
                userId: userId,
                cardId: edCid,
                parentId: edParentId,
                commentContent: edTitle.html()
            },
            dataType: "json",
            success: function (data) {
                edTitle.empty();
                edTitle.attr("data-placeholder", "请输入")
                selectCommentCount(edCid);
                $("#commentId" + edCid + " button").html(commentCount + "条评论")
                selectComment(edCid);
                edParentId = 0;
            }
        })


    })


    function displayWindow() {
        /*悬浮窗口的显示,需要将display变成block*/
        document.getElementById("window").style.display = "block";
        /*将背景变暗*/
        document.getElementById("shadow").style.display = "block";

        window.parent.$("#header").css("display", "none");
    }

    /*!当点击调用此方法,将悬浮窗口和背景全部隐藏!*/
    function hideWindow() {
        document.getElementById("window").style.display = "none";
        document.getElementById("shadow").style.display = "none";
        window.parent.$("#header").css("display", "flex");
        let edTitle = $(".ql-editor");
        edTitle.empty();
        edTitle.attr("data-placeholder", "请输入")
    }

   //关闭举报弹框
    function hideReportPopup() {
        if (reportCardOrCommentstatus==1){
            $(".textarea-reportPopup").val("");
            $(".reportPopup-data-div").css("background-color","rgb(236, 236, 236)");
            $(".reportPopup-data").empty();
            $("#shadow").css("display", "none");
            $(".reportPopup").css("display", "none");
            window.parent.$("#header").css("display", "flex");
        }else {
            $(".textarea-reportPopup").val("");
            $(".reportPopup-data-div").css("background-color","rgb(236, 236, 236)");
            $(".reportPopup-data").empty();
            $(".reportPopup").css("display", "none");
            $(".window_css").css("z-index","11");
        }
    }

    /**
     * 查询推荐关注的ajax
     */

    function endorseCount(cardId) {
        $.ajax({
            async: false,
            url: "http://localhost:8080/zhihu1/card?ac=queryEndorseCount",
            type: "post",
            data: {
                cardId: cardId
            },
            dataType: "json",
            success: function (data) {
                likeCount = data.data;
            }
        })
    }

    function selectCommentCount(cardId) {
        $.ajax({
            async: false,
            url: "http://localhost:8080/zhihu1/card?ac=selectCommentCount",
            type: "post",
            data: {
                cardId: cardId
            },
            dataType: "json",
            success: function (data) {
                commentCount = data.data;
            }
        })
    }

    //赞同
    function endorse(cardId) {
        window.parent.prohibition();
        let opraiseBtn = $("#praise" + cardId);
        let otrampleBtn = $("#trample" + cardId);
        let marker = 0;

        if (opraiseBtn.html().indexOf('已') > -1) {
            marker = 0;
        } else {
            marker = 1;
        }

        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/card?ac=modifyEndorse",
            type: "post",
            data: {
                cardId: cardId,
                userId: userId,
                marker: marker
            },
            dataType: "json",
            success: function (data) {
                if (marker == 0) {
                    endorseCount(cardId);
                    opraiseBtn.html("▲ 赞同 " + likeCount);
                    opraiseBtn.css("background", "#e7f1fe")
                    opraiseBtn.css("color", "#1772f6");

                    otrampleBtn.css("background", "#e7f1fe");
                    otrampleBtn.css("color", "#1772f6");
                } else if (marker == 1) {
                    endorseCount(cardId);
                    opraiseBtn.html("▲ 已赞同 " + likeCount);
                    opraiseBtn.css("background", "#1772f6");
                    opraiseBtn.css("color", "#ffffff");


                    otrampleBtn.css("background", "#e7f1fe");
                    otrampleBtn.css("color", "#1772f6");
                }
            }
        })
    }

    //反对
    function oppose(cardId) {
        window.parent.prohibition();
        let opraiseBtn = $("#praise" + cardId);
        let otrampleBtn = $("#trample" + cardId);
        let marker = 0;

        if (otrampleBtn.css('background-color') == "rgb(231, 241, 254)") {
            marker = 2;
        } else {
            marker = 0;
        }

        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/card?ac=modifyOppose",
            type: "post",
            data: {
                cardId: cardId,
                userId: userId,
                marker: marker
            },
            dataType: "json",
            success: function (data) {
                if (marker == 0) {
                    endorseCount(cardId);
                    opraiseBtn.html("▲ 赞同 " + likeCount);
                    opraiseBtn.css("background", "#e7f1fe")
                    opraiseBtn.css("color", "#1772f6");

                    otrampleBtn.css("background", "#e7f1fe");
                    otrampleBtn.css("color", "#1772f6");
                } else if (marker == 2) {
                    endorseCount(cardId);
                    opraiseBtn.html("▲ 赞同 " + likeCount);
                    opraiseBtn.css("background", "#e7f1fe")
                    opraiseBtn.css("color", "#1772f6");

                    otrampleBtn.css("background", "#1772f6");
                    otrampleBtn.css("color", "#ffffff");
                }
            }
        })
    }

    //收藏
    function collect(cardId) {
        window.parent.prohibition();
        let obutton = $("#collect" + cardId + " button");
        let oimg = $("#collect" + cardId + " img");
        let marker = 0;
        if (obutton.html().indexOf('取消') > -1) {
            marker = 0;
        } else {
            marker = 1;
        }

        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/card?ac=modifyCollect",
            type: "post",
            data: {
                cardId: cardId,
                userId: userId,
                marker: marker
            },
            dataType: "json",
            success: function (data) {
                if (marker == 0) {
                    obutton.html("收藏");
                    oimg.attr("src", "../imgs/index-imgs/collect-img.png");
                } else {
                    obutton.html("取消收藏");
                    oimg.attr("src", "../imgs/index-imgs/collect02-img.png");
                }
            }
        })
    }

    //点赞
    function love(cardId) {
        window.parent.prohibition();
        let obutton = $("#love" + cardId + " button");
        let oimg = $("#love" + cardId + " img");
        let marker = 0;
        if (obutton.html().indexOf('取消') > -1) {
            marker = 0;
        } else {
            marker = 1;
        }

        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/card?ac=modifyLove",
            type: "post",
            data: {
                cardId: cardId,
                userId: userId,
                marker: marker
            },
            dataType: "json",
            success: function (data) {
                if (marker == 0) {
                    obutton.html("喜欢");
                    oimg.attr("src", "../imgs/index-imgs/fond-img.png");
                } else {
                    obutton.html("取消喜欢");
                    oimg.attr("src", "../imgs/index-imgs/fond02-img.png");
                }
            }
        })
    }

    //查询用户对帖子进行了什么操作
    function tableLikeByCardId(cardId) {
        $.ajax({
            async: false,
            url: "http://localhost:8080/zhihu1/card?ac=queryTableLikeByCardId",
            type: "post",
            data: {
                cardId: cardId,
                uid: userId
            },
            dataType: "json",
            success: function (data) {
                dataTable = data.data;
            }
        })
    }

    //推荐关注
    function recommended() {
        //发送ajax请求，获取推荐关注的用户
        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/follow?ac=selectRecommended",
            type: "post",
            data: {
                userId: userId
            },
            dataType: "json",
            success: function (data) {
                insertRecommendData(data);
            }
        });
    };

    function insertRecommendData(data) {
        let recommendData = data.data;
        let recommendDiv = $(".recommend_div");
        recommendDiv.empty();
        recommendDiv.append("<div class='recommend_div_title'><img src='../imgs/index-imgs/follow.png'/>推荐关注</div>");
        for (let i = 0; i < recommendData.length; i++) {
            let recommendUser = recommendData[i];

            let recommendDivData = `
                <div class="recommend_div_content">
                  <div>
                    <img src="${recommendUser.img}"/>
                  </div>
                  <div>${recommendUser.user_name}</div>
                  <input type="text" hidden value = ${recommendUser.id}>
                  <div style="color: #1772F6">
                    <span style="font-size: 25px">+</span><a href=" ">关注</a>
                  </div>
                </div>
            `;
            recommendDiv.append(recommendDivData);
        }
    }

    $(".recommend_div").on("click", function (event) {
        window.parent.prohibition();
        event.preventDefault();
        let tagName = event.target.tagName;
        if (tagName != "A")
            return;

        let src = $(event.target);
        // console.log("===",src.parent().siblings("input").val());
        let followId = src.parent().siblings("input").val();
        let flowStatus = src.text();

        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/follow?ac=followOrUnfollowUser",
            type: "post",
            data: {
                cardId:edCid,
                userId: userId,
                followId: followId,
                flowStatus: flowStatus
            },
            dataType: "json",
            success: function (data) {
                if (data.msg == "关注成功") {
                    src.siblings("span").text("✓");
                    /*console.log(src.siblings("span").html());*/
                    src.html("已关注");
                } else {
                    src.siblings("span").text("+");
                    src.html("关注");
                }
            }
        });
    });
    //添加举报
    $(".report-div-btn").on("click",function (){
        window.parent.prohibition();
        if(reportCardOrCommentstatus==1){
            reportCommentCid = 0;
        }else{
            reportCid = 0;
        }
        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/report?ac=saveReport",
            type: "post",
            data: {
                commentId:reportCommentCid,
                cardId:reportCid,
                reportId:reportAid,
                content:$(".textarea-reportPopup").val(),
                createId:userId
            },
            dataType: "json",
            success: function (data) {
                let FormData = data.data;
                alert("举报成功");
            }
        });
        $(".reportPopup").css("display","none");
        if(reportCardOrCommentstatus==1){
            $(".textarea-reportPopup").val("")
            $(".shadow_css").css("display","none");
            window.parent.$("#header").css("display", "flex");
            $(".reportPopup-data-div").css("background-color","rgb(236, 236, 236)");
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
        }else{
            $(".window_css").css("z-index","11");
            $(".textarea-reportPopup").val("")
            $(".reportPopup-data-div").css("background-color","rgb(236, 236, 236)");
            $(".reportPopup-data").empty();
        }



    })

    //打开举报弹框
    function report(cid,status) {
        $("#report-div" + cid).css("display", "flex");
        event.stopPropagation();
        reportStatus = cid;
        console.log(status)
        if (status == "1"){
            reportCardOrCommentstatus=1;
            reportCid = cid;
        }else {
            reportCommentCid = cid;
            reportCardOrCommentstatus =2;
        }

    }
    //选中打开举报添加内容弹框
    function aReport(cid,status) {
        console.log(status)
        if (status == 1){
            $(".shadow_css").css("display", "block");
        }else {
            $(".reportPopup").css("z-index","12");
            $(".window_css").css("z-index","10");
        }
        $(".reportPopup").css("display", "block");
        window.parent.$("#header").css("display", "none");
        $.ajax({
            async: true,
            url: "http://localhost:8080/zhihu1/report?ac=queryReport",
            type: "post",
            data: {

            },
            dataType: "json",
            success: function (data) {
                let FormData = data.data;
                for (let i = 0; i < FormData.length; i++) {
                    console.log(FormData[i].report_reason)
                    let div =
                    `
                        <div class="reportPopup-data-div" id="FormData${FormData[i].id}" onclick="aReportBtn(${FormData[i].id})">${FormData[i].report_reason}</div>
                    `;
                    $(".reportPopup-data").append(div);
                }

            }
        });
    }



    function aReportBtn(id) {
        $(".reportPopup-data-div").css("background-color","rgb(236, 236, 236)");
        $("#FormData"+id).css("background-color","#098dee");
        reportAid = id;
    }
    function aUninterested(cid) {
        console.log("不感兴趣" + cid)
    }
    window.addEventListener('message',function(e){
        console.log(e);
    })
    function x() {
        Window.postMessage("message", "http://localhost:8080/zhihu1/view/personalPage.jsp", [transfer]);
        console.log("xxxxx")
    }


    function more() {
        if (status == 1) {
            limit = limit + 5;
            recommend(userId, (limit));
        } else if (status == 2) {
            limit = limit + 5;
            follow(userId, (limit));
        }
    }

</script>

</html>
